<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="UTF-8">
            <title>信息修改</title>
            <%@ include file="templates/header-css.jsp"%>
        </head>

        <body>

            <!--Header-->
            <%@ include file="templates/navbar.jsp" %>

                <div class="mid-nav shadow-div">
                    <div class="row list-row">
                        <div class="col-md-offset-4 col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <form action="." method="post">
                                        <div class="form-group">
                                            <label for="tel">Telephone</label>
                                            <div class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span> </span>
                                                <input type="text" class="form-control" id="tel" placeholder="Telephone" value="${c.cTel}" readonly>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="name">Nick Name</label>
                                            <div class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span>
                                                <input type="text" class="form-control" id="name" placeholder="The name we call you" value="${c.cPersonName}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="location">Location</label>
                                            <div class="input-group">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-home"></span> </span>
                                                <input type="text" class="form-control" id="location" placeholder="Your location" value="${c.cLocation}">
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#PwdModal">修改密码</button>
                                        <hr>
                                        <div class="form-group">
                                            <button type="button" class="btn btn-common btn-block">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 密码修改模态框 -->
                <div class="modal fade" id="PwdModal" tabindex="-1" role="dialog" aria-labelledby="title">
                    <div class="modal-dialog modal-sm" role="document">
                        <div class="modal-content">
                            <div class="modal-header gold-bg">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="title">修改密码</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-12">
                                                    <form action="." method="post">
                                                        <div class="form-group">
                                                            <label for="pwd">原密码</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                                <input type="password" class="form-control" id="oldPwd" name="oldPwd" placeholder="Old password">
                                                            </div>
                                                            <span class="error" id="pwd_checker1"></span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="pwd">新密码</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                                <input type="password" class="form-control" id="newPwd" name="newPwd" placeholder="New password">
                                                            </div>
                                                            <span class="error" id="pwd_checker2"></span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="pwd">确认密码</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                                <input type="password" class="form-control" id="newPwd2" name="newPwd2" placeholder="Confrim password">
                                                            </div>
                                                            <span class="error" id="pwd_checker3"></span>
                                                        </div>
                                                    </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-common btn-block" type="button">确认</button>
                                <button class="btn btn-default btn-block" type="button" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 登录模态框 -->
                <div class="modal fade" id="SignInModal" tabindex="-1" role="dialog" aria-labelledby="title">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header gold-bg">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="title">Sign in</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-body">
                                                    <form action="." method="post">
                                                        <div class="form-group">
                                                            <label for="usr">Telephone</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span>
                                                                <input type="text" class="form-control" name="username" placeholder="Telephone" autofocus>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="pwd">Password</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                                <input type="password" class="form-control" name="password" placeholder="password">
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-common btn-block" type="button">登录</button>
                                    <button class="btn btn-default btn-block" type="button" data-dismiss="modal">取消</button>
                                </div>
                        </div>
                    </div>
                </div>
                
                <footer>
                    <%@ include file="templates/footer.jsp"%>
                        <script>
                            $(function ($) {
                                //校验器
                                var v = new Validator();
                                
                                //登录
                                $("#SignInModal").find(".modal-footer button:first").click(function () {
                                    $.post(
                                        '${pageContext.request.contextPath}/login', {
                                            username: $('[name=username]').val(),
                                            password: $('[name=password]').val()
                                        },
                                        function (data) {
                                            if (data.st === 1) {
                                                alert(data.msg);
                                                window.location = '${pageContext.request.contextPath}';
                                            } else if (data.st === -1) {
                                                alert(data.msg);
                                            } else {
                                                alert(data.msg);
                                                alert('unknown');
                                            }
                                        }
                                    );
                                });
                                
                                //信息修改提交
                                $(".mid-nav").find("form .form-group:last button:last").click(function(){
                                    $.ajax({
                                        type: "POST",
                                        url: "updateUserInfo",
                                        data: {
                                            name: $("#name").val(),
                                            location: $("#location").val(),
                                        },
                                        success: function(data, status){
                                            alert(data.msg);
                                            if(data.st === 1){
                                                
                                            }else{
                                                
                                            }
                                        },
                                        error: function(){
                                            alert("请重试");
                                        }
                                    });
                                });
                                
                                //修改密码提交
                                $("#PwdModal").find(".modal-footer button:first").click(function(){
                                    if(v.isEmpty("#oldPwd", "#pwd_checker1", "密码不能为空或空格")){
                                        return;
                                    }
                                    if(v.isEmpty("#newPwd", "#pwd_checker2", "密码不能为空或空格")){
                                        return;
                                    }
                                    if(v.isSame("#newPwd2", "#newPwd", "#pwd_checker3", "密码不一致")){
                                        return;
                                    }
                                    
                                    $.ajax({
                                        type: "POST",
                                        url: "updatePassword",
                                        data: {
                                            oldPwd: $("#oldPwd").val(),
                                            newPwd: $("#newPwd").val()
                                        },
                                        success: function(data, status){
                                            alert(data.msg);
                                            if(data.st === 1){
                                                $("#PwdModal").modal("hide");
                                            }
                                        },
                                        error: function(){
                                            alert("请重试");
                                        }
                                    });
                                });
                                
                                //密码校验
                                $("#oldPwd").on("blur", function () {
                                    v.isEmpty(this, "#pwd_checker1", "密码不能为空或空格");
                                });

                                $("#newPwd").on("blur", function () {
                                    v.isEmpty(this, "#pwd_checker2", "密码不能为空或空格");
                                });

                                $("#newPwd2").on("blur", function () {
                                    v.isSame(this, "#newPwd", "#pwd_checker3", "密码不一致");
                                });
                            });
                        </script>
                </footer>
        </body>

        </html>